<div class="modal" id="archives">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">x</button>
				<h4 class="modal-title">Archives</h4>
			</div>
			<div class="modal-body">
				<div class="container">	
					<div id="accordion" style="max-width:500px">
						<div ng-repeat="event in doneEvents">
							<h4 class="accordion-toggle" id="item-{{ event.DALObject.Id }}" ng-click="getArchivesEventCommand(event);" >{{ event.DALObject.Title }} - {{ event.DALObject.StartDate }}</h4>
						</div>
					</div>
					
					<div class="slideleft" id="slideArchiveLeft" data-toggle="tooltip" title="Reculer" ng-hide="archivePaths == 0"><img src="./../Views/Resources/Pictures/slider-arrow-left.png" alt="<"/></div>
					<div class="slider" id="sliderArchive" style="width:400px;">
						<img ng-show="loadingEventArchives" style="width:25px;height:25px" alt="Chargement" src="Resources/Pictures/ajax-loader.gif" />
						<div ng-hide="loadingEventArchives" class="holder">
						
							<div ng-repeat="path in archivePaths">
								<div class="slide transparent">
									<img ng-src="{{ path }}" width="100%" />
								</div>
							</div>
							
						</div>
					</div>
					<div class="slideright" id="slideArchiveRight" data-toggle="tooltip" title="Avancer" ng-hide="archivePaths == 0" style="float:left;"><img src="./../Views/Resources/Pictures/slider-arrow-right.png" alt=">"/></div>
					
				</div>
			</div>
			<div class="modal-footer">
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
$(document).ready(function () {
				
	$('#accordion').width(($('.container').width()) / 2);

	$('#accordion').find('.accordion-toggle').click(function()
	{
		alert('accordion');
		//Expand or collapse this panel
		$(this).next().slideToggle('fast');

		//Hide the other panels
		$(".accordion-content").not($(this).next()).slideUp('fast');

	});
	
	var isArchiveSliding = false;
	var stepArchive = 250;
	
	$("#slideArchiveLeft").click(function () { 
		if(isArchiveSliding == false)
		{
			isArchiveSliding = true;
			var actualPosition = $("#sliderArchive").scrollLeft();

			$( "#sliderArchive" ).animate(
			{
				scrollLeft: actualPosition - stepArchive
			}, 
			{
				duration: 800,
				complete: function() 
				{
					isArchiveSliding = false;
				}
			});
		}
	});
	
	$("#slideArchiveRight").click(function () { 
		if(isArchiveSliding == false)
		{
			isArchiveSliding = true;
			var actualPosition = $("#sliderArchive").scrollLeft();
			
			$( "#sliderArchive" ).animate(
			{
				scrollLeft: actualPosition + stepArchive
			}, 
			{
				duration: 800,
				complete: function() 
				{
					isArchiveSliding = false;
				}
			});
		}
	});
});

</script>